<script setup lang="ts">
import { request } from '@/api'
import router from '@/router'
import { flattenAreaData, type Area } from '@/utils/area'
import { showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

// 新增地址

const address = ref({
  address: '',
  contact: '',
  isDefault: 1,
  receiver: '',
})
// 选择是否默认
const checked = ref(address.value.isDefault === 0)
const addAddressData = async (data: addParams) => {
  const res = await request.post('/member/address', data)
  console.log(res)
  showToast('新增成功')
  router.back()
}

// 修改
const route = useRoute()
onMounted(async () => {
  // console.log(route.query)
  if (route.query.id) {
    document.title = '编辑地址'
    const res = await request.get(`/member/address/${route.query.id}`)

    console.log(res)

    address.value = res.data.result
    address.value.isDefault = res.data.result.isDefault
  } else {
    document.title = '新增地址'
  }
})
const upDateAddress = async () => {
  const res = await request.put(`/member/address/${route.query.id}`, {
    receiver: address.value.receiver,
    contact: address.value.contact,
    address: address.value.address,
    isDefault: checked.value ? 0 : 1,
  })
  showToast('修改成功')
  console.log('res  ----->  ', res)
}

// 保存
const onSubmit = () => {
  upDateAddress()
  if (route.query.id) {
  } else {
    addAddressData({
      receiver: address.value.receiver,
      contact: address.value.contact,
      address: address.value.address,
      isDefault: checked.value ? 0 : 1,
    })
  }
}

// 修改地区
interface IPickerParams {
  selectedValues: string[]
  selectedOptions: {
    text: string
    value: string
  }[]
  selectedIndexes: number[]
}
const columns = ref<Area[]>([])
const isShowArea = ref(false)
const str = hp.getArea()
columns.value = JSON.parse(str)
const areaData = flattenAreaData(JSON.parse(str))
const onChangeArea = (data: IPickerParams) => {
  const pName = areaData[data.selectedValues[0]]
  const cName = areaData[data.selectedValues[1]]
  const aName = areaData[data.selectedValues[2]]

  // 保存用户新选择的地区的code
  profile.value.provinceCode = data.selectedValues[0]
  profile.value.cityCode = data.selectedValues[1]
  profile.value.countyCode = data.selectedValues[2]

  profile.value.fullLocation = `${pName} ${cName} ${aName}`
  isShowArea.value = false
}
// 查数据和存数据
const profile = ref({} as HPUser)
onMounted(() => {
  profile.value = hp.queryUser()
})
</script>

<template>
  <div class="address-edit-page">
    <van-cell-group>
      <van-field label="收货人" placeholder="请输入收货人" v-model="address.receiver"></van-field>
      <van-field
        label="手机号码"
        placeholder="请输入手机号码"
        v-model="address.contact"
      ></van-field>
      <van-field
        label="所在地区"
        placeholder="请输入所在地区"
        readonly
        @click="isShowArea = true"
        v-model="profile.fullLocation"
      ></van-field>
      <van-field
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
        v-model="address.address"
      >
      </van-field>
      <van-field label="设为默认地址" readonly>
        <template #extra>
          <van-checkbox
            :icon-size="20"
            checked-color="var(--mk-red)"
            v-model="checked"
          ></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button round block type="primary" @click="onSubmit"> 保存 </van-button>
    </div>
  </div>
  <!--修改地区-->
  <VanPopup v-model:show="isShowArea" position="bottom">
    <VanPicker
      title="选择地区"
      :columns="columns"
      :columns-field-names="{ text: 'name', value: 'code', children: 'areaList' }"
      @confirm="onChangeArea"
      @cancel="isShowArea = false"
    />
  </VanPopup>
</template>

<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>
